<template>
	<div v-if="dataInfo">
		<view class="wrap-goods-info">
			<view class="title-color f-28 fBold"> 预约内容 </view>

			<view class="goods-info flex align-center">
				<image class="file" :src="dataInfo.goods.service_cover" />

				<view class="info-right">
					<view class="title-color fBold f-30 limit-num-line">
						{{ dataInfo.goods.service_name }}
					</view>

					<view class="service-time f-26"> 服务时长:{{ dataInfo.time_long }}分钟 </view>

					<view class="price price-color fBold">
						<text class="symbol f-24">¥</text>
						<text class="f-32">{{ dataInfo.service_price }}</text>
					</view>
				</view>

				<view class="title-color f-26"> x{{ dataInfo.goods.num }} </view>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 详情数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.wrap-goods-info {
		margin-top: 20rpx;
		width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: white;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.goods-info {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;

			.file {
				width: 176rpx;
				height: 176rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.info-right {
				margin-left: 20rpx;
				flex: 1;
				overflow: hidden;
				margin-right: 10rpx;

				.service-time {
					margin-top: 24rpx;
					color: #a3a3a3;
				}

				.price {
					margin-top: 24rpx;

					.symbol {
						margin-right: 5rpx;
					}
				}
			}
		}

		.title-color {
			color: $title-color;
		}

		.price-color {
			color: $price-color;
		}
	}
</style>
